<template>
  <grid  :cols="4">
    <grid-item :label="item.name" v-for="item in list" :key="item.id"   @click.native="go(item.link)">
      <img slot="icon" src="../../assets/logo.png">
    </grid-item>
  </grid>
</template>

<script>
  import {Grid, GridItem} from 'vux';
  export default {
    data () {
      return {
        list: [
          {
            id: 1,
            name: 'calendar',
            link: 'calendar'
          },
          {
            id: 2,
            name: 'cell-box',
            link: 'cellBox'
          },
          {
            id: 3,
            name: 'cell-form-preview',
            link: 'preview'
          },
          {
            id: 4,
            name: 'cell',
            link: 'cell'
          },
          {
            id: 5,
            name: 'check-icon',
            link: 'checkIcon'
          },
          {
            id: 6,
            name: 'checker'
          },
          {
            id: 7,
            name: 'checklist'
          }
        ]
      };
    },
    components: {
      Grid,
      GridItem
    },
    methods: {
      go (path) {
        this.$router.push('/' + path);
      }
    }
  };
</script>

<style>
  .vux-demo {
    text-align: center;
  }

  .logo {
    width: 100px;
    height: 100px
  }

  .vux-flexbox-item {
    height: 200px;
    background: red;
  }
</style>
